import { useState } from 'react';
import { useGameStore } from '@/store/game-store';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Sparkles, User } from 'lucide-react';

const avatarOptions = [
  '/placeholder.svg?height=80&width=80',
  '/placeholder.svg?height=80&width=80',
  '/placeholder.svg?height=80&width=80',
  '/placeholder.svg?height=80&width=80',
];

export function CharacterCreationPage() {
  const [name, setName] = useState('');
  const [selectedAvatar, setSelectedAvatar] = useState(avatarOptions[0]);
  const { createPlayer } = useGameStore();

  const handleCreateCharacter = async () => {
    if (name.trim()) {
      await createPlayer(name.trim());
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center p-4">
      <div className="w-full max-w-md space-y-6">
        {/* 游戏标题 */}
        <div className="text-center space-y-2">
          <div className="flex items-center justify-center space-x-2">
            <Sparkles className="h-8 w-8 text-amber-400" />
            <h1 className="text-4xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">
              修仙传说
            </h1>
            <Sparkles className="h-8 w-8 text-amber-400" />
          </div>
          <p className="text-slate-400 text-lg">踏上修仙之路，成就无上道果</p>
        </div>

        {/* 角色创建卡片 */}
        <Card className="bg-slate-800/50 border-slate-700 backdrop-blur">
          <CardHeader className="text-center">
            <CardTitle className="text-amber-400 flex items-center justify-center space-x-2">
              <User className="h-5 w-5" />
              <span>创建角色</span>
            </CardTitle>
            <CardDescription className="text-slate-400">
              选择你的修仙者形象，开始你的修仙之旅
            </CardDescription>
          </CardHeader>
          
          <CardContent className="space-y-6">
            {/* 头像选择 */}
            <div className="space-y-3">
              <Label className="text-slate-300">选择头像</Label>
              <div className="grid grid-cols-4 gap-3">
                {avatarOptions.map((avatar, index) => (
                  <button
                    key={index}
                    onClick={() => setSelectedAvatar(avatar)}
                    className={`relative rounded-full p-1 transition-all duration-200 ${
                      selectedAvatar === avatar
                        ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-slate-800'
                        : 'hover:ring-2 hover:ring-slate-600 hover:ring-offset-2 hover:ring-offset-slate-800'
                    }`}
                  >
                    <Avatar className="h-16 w-16">
                      <AvatarImage src={avatar} alt={`头像 ${index + 1}`} />
                      <AvatarFallback className="bg-amber-500 text-slate-900 font-bold">
                        {index + 1}
                      </AvatarFallback>
                    </Avatar>
                  </button>
                ))}
              </div>
            </div>

            {/* 角色名称 */}
            <div className="space-y-2">
              <Label htmlFor="character-name" className="text-slate-300">
                角色名称
              </Label>
              <Input
                id="character-name"
                type="text"
                placeholder="请输入你的修仙者名字"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="bg-slate-700 border-slate-600 text-slate-100 placeholder:text-slate-400 focus:border-amber-400 focus:ring-amber-400"
                maxLength={12}
              />
              <p className="text-xs text-slate-500">
                名字长度不超过12个字符
              </p>
            </div>

            {/* 创建按钮 */}
            <Button
              onClick={handleCreateCharacter}
              disabled={!name.trim()}
              className="w-full bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-slate-900 font-bold py-3 text-lg transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
            >
              <Sparkles className="h-5 w-5 mr-2" />
              开始修仙之路
            </Button>
          </CardContent>
        </Card>

        {/* 游戏介绍 */}
        <Card className="bg-slate-800/30 border-slate-700 backdrop-blur">
          <CardContent className="pt-6">
            <div className="text-center space-y-2">
              <h3 className="text-amber-400 font-semibold">游戏特色</h3>
              <div className="grid grid-cols-2 gap-4 text-sm text-slate-400">
                <div>• 境界修炼系统</div>
                <div>• 回合制战斗</div>
                <div>• 装备强化</div>
                <div>• 任务系统</div>
                <div>• 社交互动</div>
                <div>• 水墨风格</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}